<template>
  <div class="homePerformance">
    <!-- 总业绩栏 -->
    <div class="performance">
      <div class="total">
        <p class="title">总 业 绩</p>
        <p class="price">{{cms.totalCms?(cms.totalCms-0).toFixed(2):''}}</p>
         <i class="triangle"></i>
      </div>
      <p class="performance-info">当月业绩：<span class="red">{{cms.curCms?(cms.curCms-0).toFixed(2):''}}</span></p>
      <p class="areatip">剩余区域代理服务津贴：<span class="red">{{cms.unSentCms?(cms.unSentCms-0).toFixed(2):''}}</span></p>
    </div>
    <div class="detail" @click="handleToggle">查看全部详情 <i :class="toggleIcon"></i></div>
    <div v-show="show">
      <!-- 详细列表 -->
      <div class="detail-list">
        <template v-for="(item,index) in Productitems">
        <div class="list clearfix" :key="index">
          <div class="list-tit">
            <span class="tit">订单号：<span class="num">{{item.orderSsn}}</span></span>
          </div>
          <div class="pImg fl">
           <img  src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512191560341&di=85f40065fe1635ff9575bb2e909eab18&imgtype=0&src=http%3A%2F%2Fwww.fzlqqqm.com%2Fuploads%2Fallimg%2F20150207%2F20150207125610343.jpg" alt="">
          </div>
         <div class="pInfo fl">
           <p>{{item.userID}} <i v-if="item.level===1">消费商</i><i v-else-if="item.level===2">经销商</i><i v-else-if="item.level===3">区域代理</i><i v-else>消费者</i></p>
           <p class="grey">订单金额： <span>¥{{item.orderAmt}}</span></p>
           <!-- <p class="grey">产生佣金： <span>¥600</span></p>  -->
           <p class="grey">交易时间:{{formatDateDT(new Date(item.createTime),'yyyy-MM-dd')}}</p>
         </div>
        </div>
        </template>

      </div>
    </div>
  </div>
</template>

<script>
export default {
  created () {
      //  查询区域业绩订单
    this.$http.post('http://218.104.153.143:8089/numberone-auth/busiOrderDtl/areOrderList.shtml', {pageSize: 100, pageNow: 1, token: this.$store.state.token}, {
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      emulateJSON: true
    }).then((data) => {
      if (data.body.success === '操作成功') {
        this.Productitems = data.body.areaOrderList.records
        this.cms.totalCms = data.body.totalCms
        this.cms.curCms = data.body.curCms
        this.cms.unSentCms = data.body.unSentCms
      } else {
        this.$message({
          message: data.body.error,
          type: 'error',
          duration: 1000,
          showClose: false
        })
        this.$router.push('/user')
      }
    }, (ne) => {
      this.$message({
        message: '网络错误',
        type: 'error',
        duration: 1000,
        showClose: false
      })
    })
  },
  data () {
    return {
      show: true,
      Productitems: [],
      cms: {
        totalCms: '',
        curCms: '',
        orderNum: ''
      }
    }
  },
  methods: {
    handleToggle () {
      this.show = !this.show
    },
    formatDateDT (date, fmt) {
      var o = {
        'M+': date.getMonth() + 1, // 月份
        'd+': date.getDate(), // 日
        'h+': date.getHours(), // 小时
        'm+': date.getMinutes(), // 分
        's+': date.getSeconds(), // 秒
        'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
        'S': date.getMilliseconds() // 毫秒
      }
      if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
      for (var k in o) { if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length))) }
      return fmt
    }
  },
  computed: {
    toggleIcon: function () {
      return this.show ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
    }

  }
}
</script>

<style lang="scss" type="stylesheet/scss">
.homePerformance{
  font-size: 12px;
  .performance{
    height: 214px;
    background-color: #F6F6F6;
    padding-top: 25px;
    .total{
      margin: 0 auto;
      width: 177px;
      height: 86px;
      background-color: #fff;
      padding-top: 8px;
      position: relative;
      .title{
        font-size: 16px;
        color:#31BE2A;
        line-height: 40px;
      }
      .price{
        font-size: 25px;
        color:#4B9E44;
      }
      .triangle{
        display: inline-block;
        border-top: 12px solid #fff;
        border-bottom: none;
        border-right: 12px solid transparent;
        border-left: 12px solid transparent;
        position: absolute;
        bottom: -10px;
        left: 76px;

      }
    }
    .performance-info{
      margin-top: 35px;
      font-size: 14px;
      margin-bottom: 10px;
    }
    .areatip{
      font-size: 14px;
    }
    .red{
        color:red;
      }
  }
  .detail{
    height: 40px;
    background-color: #DEDEDE;
    line-height: 40px;
  }
  .detail-list{
    background-color: #F6F6F6;
    margin-bottom: 60px;
    .list{
      background-color:#FFF;
      margin-bottom: 10px;
      text-align: left;
      padding-bottom: 10px;

        .list-tit{
          height: 35px;
          line-height: 35px;
          margin-bottom: 21px;
          border-bottom: 1px solid #ccc;
          .tit{
            border-left: 3px solid #31BE2A;
            padding-left:5px;
          }
          .num{
            color:#828282;
          }
        }
        .pImg{
          margin-left: 11px;
          width:82px;
          height: 82px;
          overflow: hidden;
          border-radius: 50%;
          img{
            width:82px;
            height: 82px;
          }
          }
        .pInfo{
          margin-left: 20px;
          line-height: 26px;
          span{
            color:red;
          }
          i{
            background-color: #44A439;
            color: #fff;
            border-radius: 2px;
            padding: 0 2px;
            margin-left: 10px;
          }
          .grey{
            color:#686868;
          }
        }
      }
    }
}
</style>
